<template>
  <div class="drawer">
    <el-drawer v-model="showDrawer" title="助力记录" size="40%" :destroy-on-close="true">
    <ZwTable ref="tableRef" class="table-box" :option="tableOption" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()"></ZwTable>
    </el-drawer>
  </div>
</template>
<script setup lang="tsx">
  import { reactive, ref, onMounted, watch } from 'vue'
  import ZWPagination from '@/components/ZWPagination.vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useStore } from '@/store'
  import { partakeRecord } from '@/api/smartMarketing/envelopesFission'
  import { deepCopy } from '@/utils/helper'
  import { ElMessage, ElImage, ElIcon, ElButton } from 'element-plus'
  import ZwTable from '@/components/zw/table/Table'
  import { Picture as IconPicture } from '@element-plus/icons-vue'

  const props = defineProps(['onHelpList', 'custId'])
  const store = useStore()
  const route = useRoute()
  const router = useRouter()
  const showDrawer = ref(false)
  const helpData = ref([])
  
  const getData = async (val: any) => {
    let params = {
      cust_id: props.custId,
      activity_id: route.query.id,
      page: 1,
      page_size: 15
    }
    if (params.cust_id !== '') {
      const res = await partakeRecord(params)
      helpData.value = res.data
      store.dispatch('pageTotal', res.total)
    }
  }
  const tableOption = [
    {
      prop: 'title',
      label: '客户信息',
      render({ row, column, index }) {
        const slotError = () => (
          <div class="image_slot">
            <ElIcon>
              <IconPicture />
            </ElIcon>
          </div>
        )
        return (
          <div class="cusInfo">
            <ElImage preview-src-list={[row.avatar]} vSlots={{ error: slotError }} src={row.avatar} fit="cover" class="avatar"></ElImage>
            <span style="margin-left: 6px">
              { row.nickname }<span vShow={row.nickname}>（{ row.nickname }）</span></span
            >
          </div>
        )
      }
    },
    {
      prop: 'created_at',
      label: '助力时间',
    }
  ]
  const getRowKey = (row: any) => {
    return row.id
  }
  const defaultParams = reactive({
    cust_id: props.custId,
    activity_id: route.query.id,
    page: 1,
    page_size: 15
  })
  const state = reactive({
    searchParams: deepCopy({...defaultParams,  activity_id: route.query.id, cust_id: props.custId })
  })
  const fetchApi = () => {
    // 获取文件列表
    // getTableH()
    return partakeRecord
  }
  watch(
    () => props.onHelpList,
    (val) => {
      // getData(val)
    }
  )
  const getList = async () => {}
  defineExpose({
    showDrawer,
    state
  })
</script>

<style lang="scss" scoped>
  :deep(.avatar) {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 36px;
  }
  :deep(.cusInfo) {
    display: flex;
    align-items: center;
  }
</style>
